<template>
	<view>
		<view class="strategy1">
			<view class="strategy1-item1">
				追踪策略
				<!-- <text>币 币</text> -->
			</view>
			<view class="strategy1-item2" @tap="router">
				数据详情
				<image src="../../../static/to.png"  mode="aspectFit"/>
			</view>
		</view>
		<view class="strategy2">
			<view class="strategy2-grouy1">
				<view class="item1">
					累计收益<text class="color-rise">+30%</text>
				</view>
			</view>
		</view>
		<view class="qiun-charts" style="overflow: hidden;">
			<canvas canvas-id="canvasArea" id="canvasAreas" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
			 :style="{'width':cWidth+'px','height':cHeight+'px'}" class="charts" disable-scroll=true  ></canvas>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	var canvaLineA=null;
	var _self;
	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				time:[],//时间
				form:{},//总收益
			};
		},
		name:'Strategy',
		computed:{
			pinter(){
				return t=>{
					if(!t) return '0.0000'
					return Number(t).toFixed(4)
				}
			},
		},
		created() {
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(320);
			for(let i=-5;i<0;i++){
				this.time.push(this.fun_data(i))
			}
			this.showArea();
			this.request.post('order/getCountProfit').then(res=>{
				this.form.countProfit=res.data.data.countProfit
			})
		},
		methods:{
			fun_data(aa){//计算时间
			        var date1 = new Date(),
			        time1=date1.getFullYear()+"-"+(date1.getMonth()+1)+"-"+date1.getDate();//time1表示当前时间
			        var date2 = new Date(date1);
			        date2.setDate(date1.getDate()+aa);
			        var time2 = this.num(date2.getMonth()+1)+"-"+date2.getDate()+"";
			        return time2;
			
			    },
				num(s) {
				    return s < 10 ? '0' + s: s;
				},
			router(){
				this.$Router.push({ path: '/pages/transaction/transaction'})
			},	
			showArea() {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: 'canvasArea',
					type: 'area',
					fontSize: 11,
					legend:{
						show:false,
					},
					 background:'#F3C31B',
					dataLabel: false,
					dataPointShape: false,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: this.time,//this.time			
					series: [{
							symbol: 'none',
							color: "#F3C31B",
							data: [0,30,20,20,30],//this.money
							index: 0,
							pointShape: "circle",
							show: true,
							type: "area",
						},
					],
					animation: true,
					enableScroll: true,
					xAxis: {
						type: 'grid',
						gridColor: '#F3C31B',
						gridType:'dash',
						itemCount:5,//x轴单屏显示数据的数量，默认为5个
						scrollShow:false,//新增是否显示滚动条，默认false
						scrollAlign:'left',//滚动条初始位置
						dashLength: 8,
						disableGrid:true,
						disabled:false,
						axisLine:false,
						boundaryGap: 'left', //两端不留白配置
					},
					yAxis: {
						disableGrid:true,
						disabled:true,
						gridType: 'dash',
						gridColor: '#F3C31B',
						dashLength: 8,
						splitNumber: 5,
						data:[
								{
								axisLine: true, //坐标轴轴线是否显示
								}
							],
						format:(val)=>{return val.toFixed(2)}
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						area: {
							type: 'curve',
							opacity: 0.2,
							addLine: true,
							width: 0
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
.strategy1{
	@include flex;
	justify-content: space-between;
	.strategy1-item1{
		font-weight: bold;
		font-size: 30rpx;
		text{
			padding: 6rpx 10rpx;
			margin-left: 20rpx;
			line-height: 30rpx;
			font-size: 24rpx;
			border-radius: 32rpx;
			background: rgba(255, 255, 255, 0.15);
			color: $color-fu;
		}
	}
	.strategy1-item2{
		color: #000000;
		font-size: 28rpx;
		image{
			margin-left: 10rpx;
			width: 20rpx;
			height: 20rpx;
		}
	}
}
.strategy2{
	padding: 30rpx 0rpx;
	.strategy2-grouy1{
	   line-height: 50rpx;	
	   @include flex;
	   justify-content: space-between;
	   .item1{
		   color: $color-fu;
		   text{
		   		   font-size: 30rpx;
		   		   padding-left: 20rpx;
				   color: $color-fu;
		   }
	   }
	}
}
.charts {
		// border: 1px solid red;
		width: 100%;
		height: 350upx;
		// background: #011934;
	}
</style>
